<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        div
        {
        	width: 500px;height: 500px;background-color: pink;
        }
    </style>
</head>
<body>

    <input type="button" value="新增">
	<div>

		<p>111111</p>
		<p>222222</p>
		<p>333333</p>

	</div>
</body>
</html>
<script type="text/javascript">
	//简单事件：给自己注册事件(传2个参数)
	// $('p').on('click',function(){
	// 	alert('哈哈');    //此时，新增的p元素没有事件，只能通过事件委托实现
	// });  


    //事件的执行顺序：给同一个元素注册事件，会先执行委托事件，再执行简单事件
    
    //给div自己执行的
    $('div').on('click',function(){
    	alert('嘿嘿嘿');
    });
    

    //事件委托：给父元素注册委托事件 (传3个参数)
    //给div里面的p执行的
    $('div').on('click','p',function(){
    	alert('哈哈'); 
    });
   

    $('input').on('click',function(){
    	$('<p>我是新增的p元素</p>').appendTo('div');
    });
</script>